<template>
  <div>
    <!--文本框-->
    用户名：<input type="text" v-model="test">
    {{ test }}
    <br>
    <!--下拉列表框框-->
    前端语言：
    <select v-model="selected">
      <option value="Html">Html</option>
      <option value="CSS">CSS</option>
      <option value="JavaScript">JavaScript</option>
      <option value="Jquery">Jquery</option>
      <option value="Vue">Vue</option>
    </select>
    {{ selected }}
    <br>
    <!--单选按钮-->
    性别：
    <input type="radio" value="男" v-model="picked">男
    <input type="radio" value="女" v-model="picked">女
    {{ picked }}
    <br>
    <!--复选框-->
    爱好：
    <input type="checkbox" value="football" v-model="checkedName">足球
    <input type="checkbox" value="music" v-model="checkedName">音乐
    <input type="checkbox" value="baseball" v-model="checkedName">榜球
    <input type="checkbox" value="baseketball" v-model="checkedName">篮球
    {{ checkedName }}
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  setup () {
    const state = reactive({
      test:'',
      selected:'JavaScript',
      picked:'男',
      checkedName:[],
    })
  
    return {
      ...toRefs(state),
    }
  }
}
</script>

<style lang="scss" scoped>

</style>